<script setup name="oadialog">
import {ref, defineModel, defineProps } from "vue"


let dialogVisible = defineModel({required: true})
let porps = defineProps({
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '500'
    }
})

// 定义事件
// 外部组件可能需要根据对话框的状态来决定一些操作，这个时候就可以定义一个事件
const emits = defineEmits(['cancel', 'submit'])

const onCancel = () => {
    dialogVisible.value = false;
}

const onSubmit = () => {
    emits('submit')
    dialogVisible.value = false;
}


</script>

<template>
<el-dialog v-model="dialogVisible" :title="porps.title" :width="porps.width">
        <slot></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>


<style scoped>
.el-space :deep(.el-space__item) {
    width: 100%;
}
</style>